<template>
	<view>
		<view class="db">
			<label for="c" class="lb" @click="changeAllState">
				<radio id="c" color="#C00000" :checked="isFullCheck"></radio>
				<text>全选</text>
			</label>

			<view class="heji">
				合计:<text>￥{{zongjiage | tofixed}}</text>
			</view>

			<view class="jiesuan" @click="settlement">
				<text>结算({{checkedCount}})</text>
			</view>
		</view>
		<passkeyborad :show="show" @close="close" @success="success" :zongjiage="zongjiage"></passkeyborad>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from 'vuex'
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	export default {
		name: "my-settle",
		data() {
			return {
				seconds: 3,
				// 定时器的 Id
				timer: null,
				show: false
			}
		},
		components: {
			passkeyborad
		},
		computed: {
			...mapGetters('m_cart', ['checkedCount', 'zongjiage', 'total']),
			...mapGetters('m_user', ['addstr']),
			...mapState('m_user', ['token']),
			...mapState('m_cart', ['cart']),
			...mapGetters('m_user', ['addstr', 'allstr']),
			isFullCheck() {
				return this.total === this.checkedCount
			}

		},
		filters: {
			// 把数字处理为带两位小数点的数字
			tofixed(num) {
				return Number(num).toFixed(2)
			}
		},
		methods: {
			...mapMutations('m_cart', ['updateAllGoodsState', 'clearcart']),
			...mapMutations('m_user', ['updateRedirectInfo']),
			...mapMutations('m_account', ['updatamoney']),
			// 关闭支付弹窗
			close() {
				this.show = false
			},
			success() {
				this.close()
				uni.showToast({
					title: '支付成功',
					duration: 2000
				});
				let money = uni.getStorageSync('money')
				let lastmoney = parseInt(money) - parseInt(this.zongjiage)
				console.log(lastmoney);
				this.updatamoney(this.zongjiage)
				let payOrder = this.cart.filter(x => x.goods_state)
				payOrder.forEach(item => {
					this.addOrderlit(item)
				})
				setTimeout(() => {
					this.clearcart()
					// 支付成功跳转订单界面
					uni.navigateTo({
						url: '/pages/orderList/orderList?index=1'
					})
				}, 500)
			},
			// 发送订单列表数据
			async addOrderlit(item) {
				let res = await uni.$http.post('/addOrderList', {
					goods_id: item.goods_id,
					goods_small_logo: item.goods_small_logo,
					goods_name: item.goods_name,
					goods_count: item.goods_count,
					goods_price: item.goods_price,
					goods_address: this.allstr,
					goods_if: '0',
					goods_all: parseFloat(item.goods_count) * parseFloat(item.goods_price),
					goods_state: '1',
				})
			},

			changeAllState() {
				this.updateAllGoodsState(!this.isFullCheck)
			},
			settlement() {
				// 1. 先判断是否勾选了要结算的商品
				if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')

				// 2. 再判断用户是否选择了收货地址
				if (!this.addstr) return uni.$showMsg('请选择收货地址！')

				// 3. 最后判断用户是否登录了
				if (!this.token) return this.delayNavigate()

				this.show = true
			},
			// 展示倒计时的提示消息
			showTips(n) {
				// 调用 uni.showToast() 方法，展示提示消息
				uni.showToast({
					// 不展示任何图标
					icon: 'none',
					// 提示的消息
					title: '请登录后再结算！' + n + ' 秒后自动跳转到登录页',
					// 为页面添加透明遮罩，防止点击穿透
					mask: true,
					// 1.5 秒后自动消失
					duration: 1500
				})
			},
			// 延迟导航到 my 页面
			delayNavigate() {
				this.seconds = 3
				// 1. 展示提示消息，此时 seconds 的值等于 3
				this.showTips(this.seconds)

				// 2. 创建定时器，每隔 1 秒执行一次
				this.timer = setInterval(() => {
					// 2.1 先让秒数自减 1
					this.seconds--

					if (this.seconds <= 0) {
						// 2.1 清除定时器
						clearInterval(this.timer)

						// 2.2 跳转到 my 页面
						uni.switchTab({
							url: '/pages/my/my',
							// 页面跳转成功之后的回调函数
							success: () => {
								// 调用 vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中
								this.updateRedirectInfo({
									// 跳转的方式
									openType: 'switchTab',
									// 从哪个页面跳转过去的
									from: '/pages/cart/cart'
								})
							}
						})
						return
					}

					// 2.2 再根据最新的秒数，进行消息提示
					this.showTips(this.seconds)
				}, 1000)
			}

		}
	}
</script>

<style lang="scss">
	.db {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 50px;
		width: 100%;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.lb {
			padding-left: 10px;
			font-size: 18px;
		}

		.heji {
			margin-left: -25px;

			text {
				color: #c00000;
			}
		}

		.jiesuan {
			height: 100%;
			width: 100px;
			background-color: #c00000;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			color: white;
		}

	}
</style>